<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待填报任务</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }
        
        .container {
            width: 100%;
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
        }
        
        .header {
            background-color: white;
            padding: 20px 25px;
            border-bottom: 1px solid #e9ecef;
            border-left: 4px solid #409eff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .header h1 {
            color: #2c3e50;
            margin: 0;
            font-size: 24px;
            font-weight: 500;
        }
        
        .header p {
            color: #666;
            margin: 10px 0 0 0;
            font-size: 14px;
        }
        
        .table-section {
            padding: 25px;
        }
        
        .task-table {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .status-pending {
            color: #e6a23c;
            background-color: #fdf6ec;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .status-completed {
            color: #67c23a;
            background-color: #f0f9ff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .status-overdue {
            color: #f56c6c;
            background-color: #fef0f0;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .status-refill {
            color: #f56c6c;
            background-color: #fef0f0;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .status-review {
            color: #409eff;
            background-color: #ecf5ff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .deadline-overdue {
            color: #f56c6c;
            font-weight: bold;
        }
        
        .deadline-today {
            color: #e6a23c;
            font-weight: bold;
        }
        
        .deadline-future {
            color: #67c23a;
        }
        
        .deadline-info {
            font-size: 11px;
            color: #909399;
            margin-top: 2px;
        }
        
        .main-content {
             margin-top: 0;
         }
        
        
         
         .tab-section {
             background-color: white;
             padding: 0 25px;
             border-bottom: 1px solid #e9ecef;
         }
         
         .tab-label {
             font-size: 14px;
             font-weight: 500;
         }
         
         .tab-badge {
             margin-left: 8px;
         }
         
         .el-tabs__item {
             padding: 0 20px;
             height: 50px;
             line-height: 50px;
         }
         
     </style>
</head>
<body>
         <div id="app">
         <div class="main-content">
            <div class="container">
                                 <!-- 页面标题 -->
                 <div class="header">
                     <h1>📋 待填报任务</h1>
                     <p>查看和管理人力资源需求预测的待填报任务</p>
                 </div>
                 
                 <!-- Tab切换 -->
                 <div class="tab-section">
                                           <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                                                    <el-tab-pane label="待填写" name="pending">
                               <span slot="label">
                                   <span class="tab-label">📝 待提交</span>
                                   <el-badge :value="pendingCount" class="tab-badge" v-if="pendingCount > 0"></el-badge>
                               </span>
                           </el-tab-pane>
                           <el-tab-pane label="待审核" name="review">
                               <span slot="label">
                                   <span class="tab-label">🔍 待审核</span>
                                   <el-badge :value="reviewCount" class="tab-badge" v-if="reviewCount > 0"></el-badge>
                               </span>
                           </el-tab-pane>
                           <el-tab-pane label="已完成" name="completed">
                               <span slot="label">
                                   <span class="tab-label">✅ 已完成</span>
                               </span>
                           </el-tab-pane>
                      </el-tabs>
                 </div>
                 

                
                <!-- 任务表格 -->
                <div class="table-section">
                    <div class="task-table">
                        <el-table :data="filteredTasks" border style="width: 100%" v-loading="loading">
                            <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-link type="primary" @click="viewTask(scope.row)">{{ scope.row.taskName }}</el-link>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="forecastMonth" label="预测月份" width="200" align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.forecastMonth }}
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="publisher" label="发布人" width="120" align="center"></el-table-column>
                            
                            <el-table-column prop="publishTime" label="发布时间" width="160" align="center">
                                <template slot-scope="scope">
                                    {{ formatDate(scope.row.publishTime) }}
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="deadline" label="截止时间" width="200" align="center" sortable>
                                <template slot-scope="scope">
                                    <div>
                                        <div :class="getDeadlineClass(scope.row.deadline)">
                                            {{ formatDate(scope.row.deadline) }}
                                        </div>
                                        <div class="deadline-info">
                                            {{ getDeadlineInfo(scope.row.deadline) }}
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="status" label="填写状态" width="120" align="center">
                                <template slot-scope="scope">
                                    <span :class="getStatusClass(scope.row.status)">
                                        {{ getStatusText(scope.row.status) }}
                                    </span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column label="操作" width="180" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="viewTask(scope.row)">查看</el-button>
                                    <el-button 
                                        size="mini" 
                                        type="success" 
                                        @click="fillTask(scope.row)"
                                        v-if="activeTab === 'pending' && scope.row.status !== 'completed' && scope.row.status !== 'review'">
                                        填写
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        
                        <!-- 分页 -->
                        <div style="padding: 20px; text-align: right;">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalTasks">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    loading: false,
                    currentPage: 1,
                    pageSize: 10,
                    totalTasks: 0,
                    activeTab: 'pending',

                    tasks: [
                         {
                             id: 1,
                             taskName: '2025年8-10月人力资源需求预测',
                             forecastMonth: '2025-08至2025-10',
                             publisher: 'HR',
                             publishTime: '2025-07-15',
                             deadline: '2025-07-25',
                             status: 'completed'
                         },
                         {
                             id: 2,
                             taskName: '2025年9-11月人力资源需求预测',
                             forecastMonth: '2025-09至2025-11',
                             publisher: 'HR',
                             publishTime: '2025-07-20',
                             deadline: '2025-07-30',
                             status: 'completed'
                         },
                         {
                             id: 4,
                             taskName: '2025年8-10月人力资源需求预测',
                             forecastMonth: '2025-08至2025-10',
                             publisher: 'HR',
                             publishTime: '2025-07-18',
                             deadline: '2025-07-28',
                             status: 'completed'
                         },
                         {
                             id: 5,
                             taskName: '2025年9-11月人力资源需求预测',
                             forecastMonth: '2025-09至2025-11',
                             publisher: 'HR',
                             publishTime: '2025-07-22',
                             deadline: '2025-08-01',
                             status: 'pending'
                         },
                         {
                             id: 6,
                             taskName: '2025年10-12月人力资源需求预测',
                             forecastMonth: '2025-10至2025-12',
                             publisher: 'HR',
                             publishTime: '2025-07-25',
                             deadline: '2025-08-05',
                             status: 'refill'
                         },
                         {
                             id: 7,
                             taskName: '2025年11-12月人力资源需求预测',
                             forecastMonth: '2025-11至2025-12',
                             publisher: 'HR',
                             publishTime: '2025-07-28',
                             deadline: '2025-08-15',
                             status: 'completed'
                         },
                         {
                             id: 8,
                             taskName: '2026年1月人力资源需求预测',
                             forecastMonth: '2026-01',
                             publisher: 'HR',
                             publishTime: '2025-08-01',
                             deadline: '2025-08-15',
                             status: 'review'
                         }
                     ]
                }
            },
            
            computed: {
                filteredTasks() {
                    let filtered = this.tasks;
                    
                                         // 按Tab状态筛选
                     if (this.activeTab === 'pending') {
                         filtered = filtered.filter(task => 
                             task.status === 'pending' || task.status === 'overdue' || task.status === 'refill'
                         );
                     } else if (this.activeTab === 'review') {
                         filtered = filtered.filter(task => 
                             task.status === 'review'
                         );
                     } else if (this.activeTab === 'completed') {
                         filtered = filtered.filter(task => 
                             task.status === 'completed'
                         );
                     }
                    
                    
                    
                    this.totalTasks = filtered.length;
                    return filtered;
                },
                
                 pendingCount() {
                     return this.tasks.filter(task => 
                         task.status === 'pending' || task.status === 'overdue' || task.status === 'refill'
                     ).length;
                 },
                 
                 reviewCount() {
                     return this.tasks.filter(task => 
                         task.status === 'review'
                     ).length;
                 },
                 
                                   completedCount() {
                      return this.tasks.filter(task => 
                          task.status === 'completed'
                      ).length;
                  }
             },
            
            mounted() {
                this.totalTasks = this.tasks.length;
            },
            
            methods: {
                formatDate(dateString) {
                    const date = new Date(dateString);
                    return date.toLocaleDateString('zh-CN');
                },
                
                getStatusClass(status) {
                    switch (status) {
                        case 'pending':
                            return 'status-pending';
                        case 'completed':
                            return 'status-completed';
                        case 'overdue':
                            return 'status-overdue';
                        case 'refill':
                            return 'status-refill';
                        case 'review':
                            return 'status-review';
                        default:
                            return '';
                    }
                },
                
                getStatusText(status) {
                    switch (status) {
                        case 'pending':
                            return '待填写';
                        case 'completed':
                            return '已完成';
                        case 'overdue':
                            return '已逾期';
                        case 'refill':
                            return '待重填';
                        case 'review':
                            return '待审核';
                        default:
                            return '未知';
                    }
                },
                
                getDeadlineClass(deadline) {
                    const today = new Date();
                    const taskDeadline = new Date(deadline);
                    const diffTime = taskDeadline.getTime() - today.getTime();
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                    if (diffDays < 0) {
                        return 'deadline-overdue';
                    } else if (diffDays === 0) {
                        return 'deadline-today';
                    } else {
                        return 'deadline-future';
                    }
                },

                getDeadlineInfo(deadline) {
                    const today = new Date();
                    const taskDeadline = new Date(deadline);
                    const diffTime = taskDeadline.getTime() - today.getTime();
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

                    if (diffDays < 0) {
                        return `已逾期 ${Math.abs(diffDays)} 天`;
                    } else if (diffDays === 0) {
                        return '今日截止';
                    } else {
                        return `剩余 ${diffDays} 天`;
                    }
                },
                
                
                 
                 handleTabClick(tab) {
                     this.currentPage = 1;
                     this.$message.info(`切换到${tab.label}`);
                 },
                
                viewTask(task) {
                    this.$message.info(`查看任务：${task.taskName}`);
                    // 这里可以跳转到任务详情页面或打开详情弹窗
                },
                
                fillTask(task) {
                    this.$message.success(`开始填写任务：${task.taskName}`);
                    // 这里可以跳转到填写页面
                    window.open('forecast-input.html', '_blank');
                },
                
                reviewTask(task) {
                    this.$message.info(`开始审核任务：${task.taskName}`);
                    // 这里可以跳转到审核页面或打开审核弹窗
                    // window.open('audit.html', '_blank');
                },
                
                
                
                handleSizeChange(val) {
                    this.pageSize = val;
                },
                
                handleCurrentChange(val) {
                    this.currentPage = val;
                }
            }
        });
    </script>
</body>
</html> 